import React, { useState } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import styles from './index.less'
import { Card } from 'antd';
export default () => {

    const dataList: any[] = [
        { title: "注册微信小程序应用", url: "http://uniapp.b2b2c.niuteam.cn/addon/wechat/admin/view/public/img/flow/register.png" },
        { title: "信息完善", url: "http://uniapp.b2b2c.niuteam.cn/addon/weapp/admin/view/public/img/set_up.png" },
        { title: "开发", url: "http://uniapp.b2b2c.niuteam.cn/addon/wechat/admin/view/public/img/flow/public_number.png" },
        { title: "提交审核", url: "http://uniapp.b2b2c.niuteam.cn/addon/wechat/admin/view/public/img/flow/edition.png" },
        { title: "发布", url: "http://uniapp.b2b2c.niuteam.cn/addon/wechat/admin/view/public/img/flow/complete.png" },
    ];

    const list: any[] = [
        { title: "小程序管理", desc: "小程序管理", url: "http://uniapp.b2b2c.niuteam.cn/addon/weapp/admin/view/public/img/administration.png" },
        { title: "源码下载", desc: "小程序源码下载", url: "http://uniapp.b2b2c.niuteam.cn/addon/weapp/admin/view/public/img/administration.png" },
    ];
    const len = dataList.length
    return (
        <PageHeaderWrapper title={false}>
            <Card>
                <div className={styles.navTitle}>微信小程序使用流程</div>
                <ul className={styles.processUl}>
                    {
                        dataList.map((item: any, inx: number) => {
                            return <React.Fragment key={inx}>
                                <li style={{ flex: 1, textAlign: "center" }}>
                                    <img src={item.url} alt="" />
                                    <div style={{ marginTop: "15px" }}>{item.title}</div>
                                </li>
                                {
                                    len !== (inx + 1) && <li style={{ width: "65px" }}>
                                        <img src="http://uniapp.b2b2c.niuteam.cn/addon/wechat/admin/view/public/img/flow/arrow.png" alt="" />
                                    </li>
                                }

                            </React.Fragment>
                        })
                    }
                </ul>
                <div className={styles.navTitle}>微信小程序入口</div>
                <ul className={styles.enterUl}>
                    {
                        list.map((item: any, inx: number) => {
                            return (
                                <li key={inx}>
                                    <div className={styles.item}>
                                        <img src={item.url} alt="" style={{ height: "40px", width: "40px" }} />
                                        <div style={{ marginLeft: "10px" }}>
                                            <span>{item.title}</span>
                                            <div className={styles.desc}>{item.desc}</div>
                                        </div>
                                    </div>

                                </li>
                            )
                        })
                    }
                </ul>
            </Card>
        </PageHeaderWrapper>
    )
}